<template>
	<view class="register-container">
		<view class="header">
			<text class="title">创建账号</text>
			<text class="subtitle">加入智能社区服务平台</text>
		</view>
		
		<view class="form-area">
			<view class="input-group">
				<view class="input-label">用户名</view>
				<input class="input-box" v-model="registerForm.username" placeholder="请输入用户名" />
			</view>
			
			<view class="input-group">
				<view class="input-label">密码</view>
				<input class="input-box" v-model="registerForm.password" type="password" placeholder="请输入密码" />
			</view>
			
			<view class="input-group">
				<view class="input-label">确认密码</view>
				<input class="input-box" v-model="confirmPassword" type="password" placeholder="请再次输入密码" />
			</view>
			
			<view class="input-group">
				<view class="input-label">昵称 (选填)</view>
				<input class="input-box" v-model="registerForm.nickname" placeholder="请输入昵称" />
			</view>
			
			<view class="input-group">
				<view class="input-label">手机号 (选填)</view>
				<input class="input-box" v-model="registerForm.phone" type="number" placeholder="请输入手机号" />
			</view>
			
			<button class="register-btn" @click="handleRegister">注册</button>
			
			<view class="other-links">
				<text class="link-text" @click="goToLogin">已有账号，去登录</text>
			</view>
		</view>
	</view>
</template>

<script>
import { register } from '@/api/user';
export default {
	data() {
		return {
			registerForm: {
				username: '',
				password: '',
				nickname: '',
				phone: ''
			},
			confirmPassword: ''
		}
	},
	methods: {
		// 处理注册
		async handleRegister() {
			// 表单验证
			if (!this.registerForm.username.trim()) {
				uni.showToast({
					title: '请输入用户名',
					icon: 'none'
				});
				return;
			}
			
			if (!this.registerForm.password.trim()) {
				uni.showToast({
					title: '请输入密码',
					icon: 'none'
				});
				return;
			}
			
			if (this.registerForm.password !== this.confirmPassword) {
				uni.showToast({
					title: '两次输入密码不一致',
					icon: 'none'
				});
				return;
			}
			
			if (this.registerForm.phone && !/^1\d{10}$/.test(this.registerForm.phone)) {
				uni.showToast({
					title: '手机号格式不正确',
					icon: 'none'
				});
				return;
			}
			
			try {
				uni.showLoading({
					title: '注册中...'
				});
				
				// 调用注册接口
				const res = await register(this.registerForm);
				
				uni.hideLoading();
				
				// 检查注册是否成功
				if (res.code === 200) {
					uni.showToast({
						title: '注册成功',
						icon: 'success'
					});
					
					// 跳转到登录页
					setTimeout(() => {
						uni.navigateBack();
					}, 1500);
				} else {
					uni.showToast({
						title: res.message || '注册失败',
						icon: 'none'
					});
				}
			} catch (error) {
				uni.hideLoading();
				console.error('注册失败', error);
				
				uni.showToast({
					title: error.message || '注册失败，请稍后重试',
					icon: 'none'
				});
			}
		},
		
		// 跳转到登录页面
		goToLogin() {
			uni.navigateBack();
		}
	}
}
</script>

<style lang="scss" scoped>
.register-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 40rpx;
	background-color: #f8f8f8;
}

.header {
	margin-top: 50rpx;
	margin-bottom: 60rpx;
}

.title {
	font-size: 44rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 10rpx;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
}

.form-area {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.input-group {
	margin-bottom: 30rpx;
}

.input-label {
	font-size: 28rpx;
	color: #666;
	margin-bottom: 10rpx;
}

.input-box {
	height: 80rpx;
	border-bottom: 2rpx solid #e0e0e0;
	font-size: 30rpx;
}

.register-btn {
	height: 90rpx;
	border-radius: 45rpx;
	background-color: #007AFF;
	color: #fff;
	font-size: 32rpx;
	margin-top: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.other-links {
	display: flex;
	justify-content: center;
	margin-top: 40rpx;
}

.link-text {
	color: #007AFF;
	font-size: 28rpx;
}
</style> 